<template>
  <div class="loginBox">
    <!-- 图标 -->
    <div class="logo">
      <img :src="url" alt="" />
    </div>
    <!-- 表单 -->
    <div class="formBox">
      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="user.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <Vcode 
         :show="isShow" 
         @success="onSuccess" 
         @close="onClose" 
         :canvasWidth="500"
         :canvasHeight="300"
         :imgs="[img,img2,img3]"/>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'; 
import { USERLOGIN,USERLOGOUT } from '@/store/types';
import { doLogin } from '@/api/user';
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow:false,
      img:"https://img1.baidu.com/it/u=4257548738,3841761361&fm=253&fmt=auto&app=120&f=JPEG?w=1123&h=800",
      img2:"https://img0.baidu.com/it/u=1788897470,2131663155&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      img3:"https://img1.baidu.com/it/u=2683152790,3456924252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",
      user: {
        name: "",
        password: "",
      },
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0627%2F3885b7feg00qvd3r6004dd200hs00hsg00hs00hs.gif&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663917722&t=94fba272d5dff273f3dbd28707969e15",
    };   
  },
  components: {
    Vcode,
  },
  methods: {
    ...mapMutations([USERLOGIN,USERLOGOUT]),
   async onSubmit() {
    this.isShow=true; 
    onSuccess();
  
      //需要使用编程式路由进行跳转,params query传参
      // this.$router.push({ name: "Home", params: { name: "ange" } });
      //这种写法是属于编程式传参,其实链接式也可以传参 具体可以百度下,用的比较少
      //this.$router.push({ path: "/home", query: { name: "ange" } });
      
    },
  async  onSuccess() {   
    let result= await doLogin(this.user.name,this.user.password);  
  if(result.code===200){
    var token=result.data.token;
    //window.sessionStorage.setItem("token",token);
    this[USERLOGIN](token);
    
    this.$router.push("/home"); 
    //this.$router.push({ path: "/home", query: { name: "ange" } });
  
  }           
      onClose(); // 通过验证后，需要手动关闭模态框   
    },
    onClose() {
      this.isShow = false;
    },
  
  },
};
</script>

<style lang="less" scoped>
.loginBox {
  // 其实可以使用flex布局进行居中的,但是app在另外一个页面
  width: 40%;
  height: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .logo {
    text-align: center;
    img {
      width: 120px;
      height: 120px;
      text-align: center;
      border-radius: 50%;
      background-color: red;
    }
  }
}
</style>